<template>
  <div class="number-select" v-if="!getIsPhone">
    <play-instruction 
      @click="updateIndex"
      :instruction="instruction" :showRadioCheck="true">
    </play-instruction>
    <div class="select-row" v-for="item in getCurrentLotteryState" :key="item.id">
      <lottery-ball-only
        :activeSwitchIndex="activeSwitchIndex"
        @click="handleUpdateData"
        :item="item">
      </lottery-ball-only>
    </div>
  </div>
  <div v-else class="select-number-phone">
    <div class="select-row" v-for="item in getCurrentLotteryState" :key="item.id">
      <lottery-ball-only
        :activeSwitchIndex="getRadioSelectorIndex"
        @click="handleUpdateData"
        :item="item">
      </lottery-ball-only>
    </div>
  </div>
</template>

<script>
import LotteryBallOnly from '@/components/lottery-type/common/lottery-ball-only'
import PlayInstruction from '@/components/play-instruction/play-instruction'
import { ballWithSelectorMixin } from '@/assets/js/mixin.js'

export default {
  mixins: [ballWithSelectorMixin],
  components: {
    PlayInstruction,
    LotteryBallOnly,
  },
  data() {
    return {
      instruction: '前三和值',
      activeSwitchIndex: 0,
      lotteryCount: 0
    }
  },
}
</script>

<style lang="stylus" scoped>
  @media screen and (min-width: 750px)
    .select-row >>> .balls-only
      align-items flex-start
      .tail-box 
        margin-top 3px
      .numbers
        display flex 
        flex-wrap wrap 
        .lottery-ball
          margin-bottom 10px
    .select-row 
      margin-left 20px
  @media screen and (max-width: 750px)
    .select-row >>> .balls-only 
      .tail-box-wrapper 
        display none
      .numbers 
        flex-wrap wrap
        .lottery-ball 
          width 20%
          margin 0
          text-align center
          margin-bottom 10px
          .ball 
            margin 0 auto
            width 48px 
            height 48px
            line-height 48px
            font-size 20px
            font-weight 500
    .select-row 
      width 100%
       
          
</style>